<template>
  <modal :show.sync="show" effect="zoom" title="修改邮箱">
    <div slot="modal-body" class="modal-body">
      <wizard :current-index.sync="progress.currentStep">
        <wizard-step title="输入新邮箱" :progress="progress.step1"> </wizard-step>
        <wizard-step title="验证新邮箱" :progress="progress.step2" :disable-previous="true"> </wizard-step>
        <wizard-step title="完成" :progress="progress.step3" :disable-previous="true"> </wizard-step>
      </wizard>
      <div>
        <new-email v-if="progress.currentStep === 0" :state.sync="state"></new-email>
        <verify-email v-if="progress.currentStep === 1" :state.sync="state"></verify-email>
        <complete-email v-if="progress.currentStep === 2" :state.sync="state"></complete-email>
      </div> 
      <div class="clearfix"></div>
    </div>
    <div slot="modal-footer"></div>
  </modal>
</template>

<script>
import { sendmailbindcaptcha } from 'src/api/check'
import newEmail from './newEmail.vue'
import verifyEmail from './verifyEmail.vue'
import completeEmail from './completeEmail.vue'
export default {
  props: {
    show: {
      required: true,
      type: Boolean,
      twoWay: true
    }
  },
  data: () => {
    let state = {
      newEmail: null,
      imgCode: null,
      chkCode: null
    }
    let progress = {
      currentStep: 0
    }
    return { state, progress }
  },
  watch: {
    show (val) {
      if (!val) {
        this.reset()
      }
    }
  },
  events: {
    nexStep() {
      this.progress.currentStep++
    },
    prevStep() {
      this.progress.currentStep--
    },
    close() {
      this.show = false
    },
    sendmailbindcaptcha() {
      let self = this
      sendmailbindcaptcha(this.state.newEmail).catch(data => self.$notify.error(data))
    }
  },
  methods: {
    reset() {
      this.state.newEmail = null
      this.state.imgCode = null
      this.state.checkCode = null
      this.progress.currentStep = 0
    }
  },
  components: {
    newEmail,
    verifyEmail,
    completeEmail
  }

}
</script>
<style>

</style>